<!--
  * 首页
  *
  * @Author:    dcsoft
  * @Date:      2022-09-12 22:34:00
  * @Wechat:    dctech
  * @Email:     dctech@dctech2020.com
  *@Copyright 山东东晨软件科技有限公司(https://www.dctech2020.com),since 2015
  *
-->
<template>
  <!--  顶部用户信息-->
  <a-row>
    <HomeHeader />
  </a-row>
  <!--下方左右布局-->
  <a-row :gutter="[10, 10]">
    <!--左侧-->
    <a-col :span="16">
      <a-row :gutter="[10, 10]">
        <!--公告信息-->
        <a-col :span="12">
          <a-card title="综合治理水平评估">
            <!-- <p>综合治理水平评估</p> -->
            <!-- <p>1 能源可持续发展指数: 85%</p>
            <p>2 碳达峰目标完成率: 70%</p>
            <p>3 环境质量综合指数: 90%</p> -->
            <div class="RoundedsquareBox">
              <div class="word">
                <div class="Roundedsquare">
                  <img src="../../../assets/images/二氧化碳.png" />
                  <span>70%</span>
                </div>
                <div>能源指数</div>
              </div>

              <div class="word">
                <div class="Roundedsquare1">
                  <img src="../../../assets/images/碳-copy.png" />
                  <span>70%</span>
                </div>
                <div>碳达成率</div>
              </div>
              <div class="word">
                <div class="Roundedsquare2">
                  <img src="../../../assets/images/环境.png" />
                  <span>90%</span>
                </div>
                <div>环境指数</div>
              </div>
            </div>
            <div style="margin-top: 20px; margin-left: 10px">
              集团可持续发展水平: ★★★★☆
            </div>
          </a-card>

          <a-card title="碳核查与碳资产" style="margin-top: 10px">
            <div style="display: flex">
              <div>
                <p>1 碳排放总量: 12,500 tCO2e</p>
                <p>2 碳排放强度: 0.8 tCO2e/万元GDP</p>
                <!-- <p>3 碳资产总值: 6,000 万元</p> -->
                <p>3 碳汇总面积: 1,200 公顷</p>
                <!-- <p>5 碳中和进度: 60%</p> -->
                <p>4 集团碳账户余额: 3,500 tCO2e</p>
              </div>
              <div style="width: 290px; height: 150px" class="echarts">
                <eChart :option="plot" name="plot" />
              </div>
            </div>
          </a-card>

          <a-card title="环境监测" style="margin-top: 10px">
            <!-- <p>环境监测</p> -->
            <div style="display: flex">
              <div>
                <p>1 PM2.5浓度: 35 µg/m³</p>
                <p>2 空气质量指数(AQI): 50</p>
                <p>3 水质达标率: 95%</p>
                <p>4 绿地覆盖率: 40</p>
              </div>

              <div style="width: 330px; height: 150px" class="echarts">
                <eChart :option="ld" name="ld" />
              </div>
            </div>
          </a-card>
        </a-col>
        <!--企业动态-->
        <a-col :span="12">
          <a-card title="ESG数据展示">
            <!-- <p>ESG数据展示</p> -->
            <p>1 ESG综合评分: 85分</p>
            <div style="position: absolute; left: 190px">
              <p>3 社会(S)评分: 80分</p>
              <p>3.1 员工满意度: 90%</p>
              <p>3.2 供应商本地化率: 70%</p>
              <p>3.3 社区投资额: 500 万元</p>
            </div>

            <p>2 环境(E)评分: 90分</p>
            <p>2.1 温室气体减排率: 20%</p>
            <p>2.2 废弃物回收率: 60%</p>
            <p>2.3 水资源利用效率: 85%</p>
            <div style="position: absolute; left: 360px; top: 113px">
              <p>4 治理(G)评分: 85分</p>
              <p>4.1 董事会独立董事比例: 40%</p>
              <p>4.2 反腐倡廉培训覆盖率: 100%</p>
              <!-- <p>4.3 ESG信息披露水平: 高</p> -->
            </div>

            <div class="echarts" style="width: 500px; height: 220px">
              <eChart :option="bar" name="bar" />
            </div>
          </a-card>

          <div style="margin-top: 10px">
            <a-card title="碳足迹与碳交易">
              <!-- <p>碳足迹与碳交易</p> -->

              <p>1 集团碳足迹: 15,000 tCO2e</p>
              <p>2 人均碳足迹: 3.2 tCO2e/人</p>
              <p>3 累计碳交易量: 8,000 tCO2e</p>
              <p>4 碳交易均价: 80 元/tCO2e</p>
              <p>5 碳交易总额: 640 万元</p>

              <div
                class="echarts"
                style="
                  width: 300px;
                  height: 220px;
                  position: absolute;
                  left: 210px;
                  top: 40px;
                "
              >
                <eChart :option="pplt" name="pplt" />
              </div>
            </a-card>
          </div>
        </a-col>
        <!--各类报表-->
        <!-- <a-col :span="6">
          <Gauge :percent="saleTargetPercent" />
        </a-col> -->
        <a-col :span="12">
          <!-- <Pie /> -->
        </a-col>
        <a-col :span="12">
          <!-- <Category /> -->
        </a-col>
        <a-col :span="24">
          <!-- <Gradient /> -->
        </a-col>
      </a-row>
    </a-col>
    <!--右侧-->
    <a-col :span="8">
      <a-row :gutter="[10, 10]">
        <!--快捷入口-->
        <!-- <a-col :span="24">
          <HomeQuickEntry />
        </a-col> -->
        <!--关注公众号-->
        <a-col :span="24">
          <!-- <OfficialAccountCard /> -->
          <a-card title="源网荷储一体化系统">
            <!-- <p>源网荷储一体化系统</p> -->

            <p>1 实时能源供需平衡率: 98%</p>
            <p>2 可再生能源占比: 35%</p>
            <p>&nbsp;&nbsp;2.1 光伏发电量: 10,000 MWh/年</p>
            <p>&nbsp;&nbsp;2.2 风力发电量: 8,000 MWh/年</p>
            <p>3 电网稳定性指数: 95%</p>
            <p>4 储能系统容量: 50MWh</p>
            <p>&nbsp;&nbsp; 4.1 电池储能容量: 30MWh</p>
            <p>&nbsp;&nbsp;4.2 飞轮储能容量: 20MWh</p>
            <p>5 能源利用效率: 90%</p>
            <!-- <p>6 园区年度总用电量: 50,000 MWh</p>
            <p>&nbsp;&nbsp;6.1 工业用电量: 35,000 MWh</p>
            <p>&nbsp;&nbsp;6.2 商业用电量: 10,000 MWh</p>
            <p>&nbsp;&nbsp;6.3 公共设施用电量: 5,000 MWh</p>
            <p>7 园区年度总用热量: 100,000 GJ</p>
            <p>&nbsp;&nbsp7.1 工业用热量: 70,000 GJ</p>
            <p>&nbsp;&nbsp;7.2 商业用热量: 20,000 GJ</p>
            <p>&nbsp;&nbsp;7.3 公共设施用热量: 10,000 GJ</p> -->
            <div class="echarts" style="width: 260px; height: 260px">
              <eChart :option="bin" name="bin" />
            </div>
            <div
              class="echarts"
              style="
                width: 260px;
                height: 260px;
                position: absolute;
                left: 280px;
                bottom: 130px;
              "
            >
              <eChart :option="bin" name="binn" />
            </div>

            <div
              class="echarts"
              style="
                width: 269px;
                height: 340px;
                position: absolute;
                top: 60px;
                left: 250px;
              "
            >
              <eChart :option="ppltt" name="ppltt" />
            </div>
            <!-- <p>8 园区年度总用水量：6000</p> -->
            <br />
            <br />
            <br />
            <br />
            <br />
          </a-card>
        </a-col>
        <!--待办、已办-->
        <a-col :span="24">
          <!-- <ToBeDoneCard /> -->
        </a-col>
        <!--更新日志-->
        <a-col :span="24">
          <!-- <ChangelogCard /> -->
        </a-col>
      </a-row>
    </a-col>
  </a-row>
</template>
<script setup>
import { computed } from "vue";
import HomeHeader from "./home-header.vue";
import eChart from "/@/components/e-chart.vue";
// 业绩完成百分比
const saleTargetPercent = computed(() => {
  return 75;
});

const plot = computed(() => {
  return {
    grid: {
      width: "82%",
      height: "70%",
      left: "19%",
      bottom: "12%",
    },
    legend: {
      data: ["历史五年碳资产曲线图"],
      left: "30%",
    },
    xAxis: {
      type: "category",
      data: ["2019", "2020", "2021", "2022", "2023"],
      axisLabel: {
        interval: 0,
      },
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [150, 30, 124, 118, 135],
        type: "line",
        name: "历史五年碳资产曲线图",
      },
    ],
  };
});
const ld = computed(() => {
  return {
    grid: {
      width: "82%",
      height: "70%",
      left: "20%",
      bottom: "12%",
    },
    legend: {
      data: ["绿地覆盖率"],
      left: "45%",
      top: "0px",
    },
    xAxis: {
      type: "category",
      data: ["2019", "2020", "2021", "2022", "2023"],
      axisLabel: {
        interval: 0,
      },
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [20, 50, 90, 80, 135],
        type: "line",
        name: "绿地覆盖率",
      },
    ],
  };
});
const bar = computed(() => {
  return {
    legend: {
      data: ["历史五年ESG综合分值"],
      padding: [16, 0, 0, 0],
    },
    grid: {
      width: "90%",
      height: "70%",
      left: "8%",
      bottom: "8%",
    },
    xAxis: {
      type: "category",
      data: ["2019", "2020", "2021", "2022", "2023"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [60, 70, 90, 80, 70],
        type: "bar",
        name: "历史五年ESG综合分值",
        barWidth: "40%",
        itemStyle: {
          normal: {
            color: function (params) {
              var colorList = ["#c23531", "#2f4554", "#61a0a8", "#d48265", "#91c7ae"];
              return colorList[params.dataIndex];
            },
          },
        },
      },
    ],
  };
});

const pplt = computed(() => {
  return {
    legend: {
      data: ["历史五年碳交易总额"],
      padding: [30, 0, 0, 0],
    },
    grid: {
      width: "90%",
      height: "65%",
      left: "10%",
      bottom: "9%",
    },
    xAxis: {
      type: "category",
      data: ["2019", "2020", "2021", "2022", "2023"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [250, 130, 224, 28, 135],
        type: "line",
        name: "历史五年碳交易总额",
      },
    ],
  };
});

const bin = computed(() => {
  return {
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: [
          { value: 48, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
});
const ppltt = computed(() => {
  return {
    legend: {
      data: ["历史5年可再生能源占比波动"],
      padding: [16, 0, 0, 0],
    },
    grid: {
      width: "90%",
      height: "70%",
      left: "12%",
      bottom: "9%",
    },
    xAxis: {
      type: "category",
      data: ["2019", "2020", "2021", "2022", "2023"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [50, 130, 224, 218, 235],
        type: "line",
        name: "历史5年可再生能源占比波动",
      },
    ],
  };
});
</script>
<style lang="less" scoped>
@import "./index.less";
.RoundedsquareBox {
  display: flex;
  // width: 450px;
  justify-content: space-around;
  .word {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 120px;
    border: 1px solid #ccc;
    .Roundedsquare {
      height: 120px;
      width: 130px;
      // border-radius: 10px;
      background-color: #79cdcd;
      align-items: center;
      position: relative;
      span {
        color: white;
        position: absolute;
        left: 50%;
        top: 79%;
        transform: translate(-50%, -50%);
      }
      img {
        width: 70px;
        height: 70px;
        position: absolute;
        left: 50%;
        top: 13%;
        transform: translate(-50%, -12%);
      }
    }
    .Roundedsquare1 {
      height: 120px;
      width: 130px;
      // border-radius: 10px;
      background-color: #ee6666;
      align-items: center;
      position: relative;
      span {
        color: white;
        position: absolute;
        left: 50%;
        top: 79%;
        transform: translate(-50%, -50%);
      }
      img {
        width: 50px;
        height: 50px;
        position: absolute;
        left: 50%;
        top: 18%;
        transform: translate(-50%, -12%);
      }
    }
    .Roundedsquare2 {
      height: 120px;
      width: 130px;
      // border-radius: 10px;
      background-color: #91cc75;
      align-items: center;
      position: relative;
      span {
        color: white;
        position: absolute;
        left: 50%;
        top: 79%;
        transform: translate(-50%, -50%);
      }
      img {
        width: 70px;
        height: 70px;
        position: absolute;
        left: 50%;
        top: 13%;
        transform: translate(-50%, -12%);
      }
    }
  }
}
</style>
